<!doctype html>
{php}
    $static = '/static/home/';
{/php}
<!--[if IE 7]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>{$siteConfig['seo_title']}</title>
    <meta name="apple-mobile-web-app-title" content="{$siteConfig['seo_title']}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{$static}images/favicon.ico">
    <link href="{$static}css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/app.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/style.css" rel="stylesheet" type="text/css" />
</head>

<body data-sidebar="dark">

<!-- Begin page -->
<div id="layout-wrapper">

    {include file='public/mine_topbar' /}
    {include file='public/mine_left' /}

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">
                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h4 class="mb-0 font-size-18">账户设置</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">银管家</a></li>
                                    <li class="breadcrumb-item"><a href="{:url('account/index')}">账户设置</a></li>
                                    <li class="breadcrumb-item active">二步验证</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row justify-content-center">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h3>二步验证</h3>
                                <p>1、应用商店下载Google Authenticator 或者 Authy应用</p>
                                <p>2、打开应用，扫描二维码。</p>
                                <p>3、设置好备注信息</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="js-ajax-form">
                                    <p class="card-title-desc">默认关闭二步验证</p>
                                    <div class="form-group row mb-4">
                                        <label class="col-md-3 col-form-label">配置</label>
                                        <div class="col-md-3">
                                            <a href="javascript:void(0)" class="btn btn-success btn-block waves-effect"  data-toggle="modal" data-target="#addModal">添加配置二次验证</a>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-4">
                                        <label class="col-md-3 col-form-label">验证开关</label>
                                        <div class="col-md-9">
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" id="customRadio1" name="twoFactorStatus" value="1"
                                                               {if condition="$info.status eq 1"}checked{/if} class="custom-control-input">
                                                        <label class="custom-control-label" for="customRadio1">开启</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" id="customRadio2" name="twoFactorStatus" value="0"
                                                               {if condition="$info.status eq 0"}checked{/if} class="custom-control-input">
                                                        <label class="custom-control-label" for="customRadio2">关闭</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-4">
                                        <label class="col-md-3 col-form-label">二次验证教程</label>
                                        <div class="col-md-9">
                                            <a href="https://sspai.com/post/27019" target="_blank">https://sspai.com/post/27019</a>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-5">
                                        <label class="col-md-3 col-form-label"></label>
                                        <div class="col-md-3">
                                            <button type="submit" class="btn btn-primary btn-block waves-effect">确认保存</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->

    </div>
    <!-- end main content-->

</div>
<!-- END layout-wrapper -->

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <p class="text-center">
                    <img src="{$info.image}"  width="180"/>
                </p>
                <h3 class="text-center color-red">若二维码无法使用，请使用密钥按钮</h3>
                <p class="text-center font-14">二维码无法使用时，请点击authy最下方的"Enter key manually"，输入以下字符</p>
                <h3 class="text-center">{$info.secret}</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- JAVASCRIPT -->
<script src="{$static}libs/jquery/jquery.min.js"></script>
<script src="{$static}libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="{$static}libs/metismenu/metisMenu.min.js"></script>
<script src="{$static}libs/simplebar/simplebar.min.js"></script>
<script src="{$static}libs/node-waves/waves.min.js"></script>
<script src="{$static}libs/layer/layer.js"></script>

<script src="{$static}js/pages/jquery.validate.min.js"></script>
<script src="{$static}js/app.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $(".js-ajax-form").validate({
            rules: {
                twoFactorStatus: {
                    required: true
                },
            },
            messages: {
                password: {
                    required: "请选择开启或者关闭"
                }
            },
            submitHandler: function() {
                $.ajax({
                    url: "{:url('account/twoFactorSwitch')}",
                    type: "POST",
                    data: $(".js-ajax-form").serialize(),
                    dataType: 'json',
                    async: false,
                    success: function (res) {
                        if (res.errorCode === 200) {
                            layer.alert('设置成功');
                        } else {
                            layer.alert(res.message, {
                                title: '提示',
                                icon: 2
                            });
                        }
                    }
                });
            },
            errorPlacement: function(error, element) {
                error.insertAfter(element.parent());
            }
        });
    });
</script>
</body>
</html>